<template>
	<view class="uni_box">
		<image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
		<navbar :isback='false' :backgroundColor='backgroundColor'>
			<view slot="left" class="hleft" @click="toCommunity">
				<image class="icon_dw" src="/static/img/icon_dw.png" />
				<text class="adname txt">{{formData.address+formData.name||'请选择'}}</text>
				<image class="icon_sx" src="/static/img/icon_sx.png" />
			</view>
		</navbar>
		<!-- #ifdef APP-PLUS -->
		<view class="immerse"></view>
		<!-- #endif -->
		<view class="newcontent">
			<view class="hone">
				<view class="hbiao">
					<view class="bleft">
						<text class="bt">牛牛日结</text>
						<text class="btmiao">来牛牛   招工找活快人一步</text>
						<view class="bqian">
							<view class="qians">
								<image class="qiansicon" src="/static/img/icon_lb.png" />
								<text class="qname">真老板</text>
							</view>
							<view class="qians">
								<image class="qiansicon" src="/static/img/icon_zgw.png" />
								<text class="qname">真岗位</text>
							</view>
							<view class="qians">
								<image class="qiansicon" src="/static/img/icon_zg.png" />
								<text class="qname">真工价</text>
							</view>
						</view>
					</view>
					<image class="img_zs" :src="ossThree('/uploads/20250408/4baab9b3a22b692804369e2f242d5ce1.png')" />
				</view>
				<view class="hling">
					<view class="linitemone" @click.stop="navrouter('/pages/my/yhXieyiTwo?key=jiedanliucheng')">
						<image class="img_bjone" :src="ossThree('/uploads/20250408/8d04baffeb639c83ad64f91082619469.png')" />
						<view class="items">
							<text class="lname">专业零工平台</text>
							<text class="jiename">接单免费</text>
						</view>
					</view>
					<view class="linitemone linitemtwo" style="margin-left: 18rpx;" @click.stop="navrouter('/pages/my/yhXieyiTwo?key=jiedanliucheng')">
						<view class="items">
							<text class="lname">优质岗位</text>
							<text class="jiename">实时更新</text>
							<image class="img_gw" src="/static/img/img_gw.png" />
						</view>
					</view>
					<view class="linitemone linitemtwo" @click.stop="navrouter('/pages/my/yhXieyiTwo?key=jiedanliucheng')">
						<view class="items">
							<text class="lname">接单必看</text>
							<text class="jiename">养成好习惯</text>
							<image class="img_gw" src="/static/img/img_bk.png" />
						</view>
					</view>
				</view>

				
			</view>
			<view class="notic" v-if="noticlist" @click="getweigui">
				<image class="icon_gg" src="/static/img/ggao.png" />
				<view class="noticright">
					<u-notice-bar mode="vertical" :list="noticlist" bg-color="none" color="#EA5918" font-size="24"
						:volume-icon="false" @click="getweigui" duration="3500"></u-notice-bar>
				</view>
				<view class="gongshi">违规公示</view>
			</view>
			<view class="list">
				<view class="souitem">
					<view class="souleft">
						<view class="shua " :class="order=='distance'?'sactive':''" @click="getorder('distance')">
							<text class="huaname">附近</text>
							<view class="huabot"></view>
						</view>
						<view class="shua" :class="order=='new'?'sactive':''" @click="getorder('new')">
							<text class="huaname">最新</text>
							<view class="huabot"></view>
						</view>
						<view class="shua" :class="order=='weigh'?'sactive':''" @click="getorder('weigh')">
							<text class="huaname">精选</text>
							<view class="huabot"></view>
						</view>
					</view>
					<!-- <view class="shainame">
						筛选
						<image class="icon_xz" src="/static/img/icon_xz.png" />
					</view> -->
					<view class="shainame">
						<image class="icoN_ss" src="/static/img/icoN_ss.png" />
						<u-input style="flex: 1;" v-model="keywords" type="text" :border="false" placeholder="请输入关键词"/>
						<text @click="blur">搜索</text>
					</view>
				</view>
				<view class="litem" v-for="(item,index) in list" :key="index" @click="getdetail(item)">
					<view class="ione">
						<text class="riqi"><text class="qitime">{{ item.starttime }}</text></text>
						<text class="riqi diadress txt ml">{{item.address}}</text>
						<text class="qitime">{{item.distance}}</text>
					</view>
					<view class="itwo">
						<view class="name">
							<text class="ntit txt">{{item.title}}</text>
							<text class="yugu" v-if="item.settlement==1">预估赚 ¥<text class="yuprice">{{getzhneg(item.price*item.work_hour)}}</text></text>
						</view>
						<view class="bqitem">
							<view class="sc" :class="ind==0?'lv':ind==1?'chengse':''" v-if="item.tags&&i!=''" v-for="(i,ind) in item.tags" :key="ind">
								{{i}}
							</view>
						</view>
						<view class="bm">
							<text class="bmleft" :class="item.settlement==2?'lvtxt':''">{{item.price}}<text class="danwei" :class="item.settlement==2?'lvtxt':''">{{item.settlement==1?'元/小时':'元/件' }}</text></text>
							
							<view class="bmright" v-if="item.is_can == 0">
								<view class="zhaoman">暂停招工</view>
							</view>
							<view class="bmright" v-else>
								<image class="img_an" src="/static/img/img_an.png" />
								<view class="bmitem">火速报名</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore="loadmore" />
			</view>
		</view>
		
</view>
</template>

<script>

export default {
	
    name: 'CHome',
    props: {
        backgroundColor: {
            type: String,
            default: 'none'
        },
		aordernum:{
			type:Number/String
		}

    },
	data() {
		return {
			tablist: [{
				name: '待收货'
			}, {
				name: '待付款'
			}, {
				name: '待评价'
			}],
			current: 0,
			noticlist: [
				// '寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
				// '平明送客楚山孤',
				// '洛阳亲友如相问',
				// '一片冰心在玉壶'
			],
			border: false,
			keyword: '',
			enable:false,
			Captop:0,
			offTop:0,
			shaishow:false,
			loginshow:false,
			userinfo:{
				mobile: "",
				token: "bb22423a-be41-4419-a812-5778737759b9"
			},
			seeion_key:'',

			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			keywords:'',
			latitude:'',
			longitude:'',
			formData:{
				address:'',
				name:'',
			},
			glist:[],
			order:'distance',//distance 距离 new 最新 weigh 精选
			// backgroundColor:'none'
		}
	},
	components: {
	},
	computed: {
	},
	watch: {
		aordernum:{
			handler(val, oldval) {
				if(this.aordernum!=0){
					this.getshuaxin()
				}
				
			},
			immediate: false,
			deep: true
		},
	},


	mounted() {
		//在mounted中调用是确保元素已被加载
		//#ifdef MP-WEIXIN
		//通过getMenuButtonBoundingClientRect 获取胶囊的高度宽度等信息
		this.Cap = uni.getMenuButtonBoundingClientRect();
		
		this.Captop = this.Cap.top/ (uni.upx2px(100) / 100);
		//我们需要吸顶的位置 是计算出来的  胶囊的高度height+胶囊距离顶部状态栏的距离top
		let CapHeight = (this.Cap.height + this.Cap.top);
		//由于拿到的单位是px 通过uni自带的upx2px方法 将px转换为rpx 
		//这样做是因为uView的Sticky组件要求传入的offset-top值单位是rpx
		this.offTop =Number( CapHeight / (uni.upx2px(100) / 100))
		//最后拿到想要的值并传入即可
		this.enable = true
		//#endif
		//#ifdef H5
		this.offTop = 0
		//最后拿到想要的值并传入即可
		this.enable = true
		//#endif
		this.getInit()
		this.getgshi();
	},
	created() {
		
	},
	async onShow() {
		// if(!uni.getStorageSync('token')){
		// 	// this.loginshow = true
		// 	// #ifdef MP
		// 	this.getLogin()
		// 	// #endif
		// 	// #ifdef H5
		// 	uni.setStorageSync('token',this.userinfo.token)
		// 	// uni.setStorageSync('userid',this.userinfo.user_id)
		// 	// #endif
			
			
		// 	this.getInit()
		// }else{
		// 	this.getInit()
		// }
	},
	onReachBottom: function () {
		this.loadmore();
	},
	methods: {
		getshuaxin(){
			if(uni.getStorageSync('token')&&!this.latitude){
				this.getdinwei()
			}else if(uni.getStorageSync('token')&&this.list==''){
				this.getClear()
			}
		},
		getzhuce(){
			this.navrouter("/pages/login/newregister");
		},
		async getLogin(){
			uni.login({
				provider: 'weixin',
				timeout: 3000,
				success: res => {
					console.log(res)
					this.$u.toast(res.code);
					this.copy(res.code)
					// this.loginshow = true
					if (res.code) {
						this.getLogintwo(res.code)
					}
				},
				fail: () => {
					uni.$u.toast("请求失败")
				}
			})
		},
		async getLogintwo(code){
			let res = await this.$u.api.miniapplogin({
				code:code
				// userid:uni.getStorageSync('userid')
			});
			console.log(res.userinfo)
			this.seeion_key = res.seeion_key
			uni.setStorageSync('token',res.userinfo.token)
			// uni.setStorageSync('userid',res.Data.userinfo.userid)
			if(res.userinfo.mobile == ''||!res.userinfo.mobile){
				//弹出登录
				this.loginshow = true
			}else{
				this.getInit()
			}
			// // console.log(res)
			// console.log(res.Data)
		},
		getInit(){//请求接口
			// this.getGonggao();//公告
			// this.getLun();//轮播图
			if(uni.getStorageSync('token')){
				this.getdinwei()
			}else{
				this.getClear()
			}
		},
		getdinwei(){
			
			//#ifdef MP-WEIXIN
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: (res)=>{
					console.log(res)
					if(res.latitude){
						that.latitude = res.latitude
					}
					if(res.latitude){
						that.longitude = res.longitude
					}

					that.getClear()
					if(!that.formData.address){
						that.getjiexiadress();//解析地址
					}
					if(uni.getStorageSync('token')){
						that.getgxwz(that.latitude,that.longitude);//更新当前位置
					}
				},fail:(e)=>{
					console.log(e)
					if(that.list==''){
						that.getList();//列表接口
					}
				}
			})
			//#endif
			//#ifdef H5
			this.latitude = '34.74821'
			this.longitude = '113.61332'
			if(this.list==''){
				this.getList();//列表接口
			}
			//#endif
			
			
		},
		async getgxwz(latitude,longitude){

			let res = await this.$u.api.user({
                lat:latitude,
                lng:longitude
            });
		},
		async getGonggao(){
			let res = await this.$u.api.noticelist({
			});
			this.glist = res.list
			let a = []
			for(let i in res.list){
				a.push(res.list[i].title)
			}
			this.noticlist = a
			// console.log(res) 
		},
		async getjiexiadress(){
			let res = await this.$u.api.getAddress({
				lat:this.latitude,
				lng:this.longitude
			});
			this.formData.address = res.address
			this.formData.name = res.name
			// if(that.list==''){
			// 	that.getClear();//列表接口
			// }
		},
		async getLun(){
			let res = await this.$u.api.banner({
			});
			console.log(res) 
		},
		async getList(){//列表数据
			let res = await this.$u.api.getTaskList({
			  limit:this.limit,
			  page:this.page,
			  keywords:this.keywords,
			  lat:this.latitude,
			  lng:this.longitude,
			  order:this.order
			});
			console.log(res)
			// this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			if(res.list==''||Number(list.length)<Number(this.limit)){
			  this.status = 'nomore';
			}
			
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		tolink() {
			this.navrouter("/pages_client/sub/ceshi");
		},
		changeCate(index) {
			this.scrollLeft = 50 * (index - 1);
			this.currentindex = index
		},
		getdetail(item){
			if(item.is_can == 0){
				this.$u.toast("该任务暂不可报名");
				return;
			}
			this.navrouter("/pages_client/twoPage/Detail?id="+item.id+'&latitude='+this.latitude+'&longitude='+this.longitude);
		},
		blur(){
			this.getClear()
		},
		getorder(e){
			this.order = e
			this.getClear()
		},
		getClear(){
			this.list = []
			this.page = 1,
			this.status= "loadmore"
			this.getList()
		},
		onUserInfoClick(e){
			console.log(e)
			if(e.code == 200){
				this.loginshow = false
				this.getInit()
			}
		},
		change(e){

		},
		clicknotice(e){
			
			let noticlist = this.glist
			this.navrouter("/pages/TPage/NoticeDetail?id="+noticlist[e].id);
		},
		toCommunity() {
			console.log("+++")
			const that = this
			uni.getSetting({
				success: (res) => {
					console.log(res)
					const status = res.authSetting
					// 如果当前设置是：不允许，则需要弹框提醒客户，需要前往设置页面打开授权
					if (!status['scope.userLocation']) {
						uni.showModal({
							title: "是否授权当前位置",
							content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
							success: (tip) => {
								if (tip.confirm) {
									// 如果已经拒绝过，则需要打开设置页面，授权弹框不会弹出第二次，因为已经明确拒绝/确认过了（微信的原因）
									if (that.isDeny) {
										uni.openSetting({
											success: function (res) {
												// 在设置页面授权成功后再次获取位置信息
												uni.showToast({
													title: "授权成功",
												})
												that.isDeny = false
												// 修改授权后返回页面，弹框消失，需要再点一次
											},
											fail: (data) => {
												console.log(data)
												// isDeny 是否拒绝过授权，如果拒绝过，再点击按钮的话，弹框确认后就直接打开微信小程序设置页
												that.isDeny = true
											}
										})
										return
									}
									// 如果点击了确认，并且没有拒绝过微信系统授权弹框，则会弹出授权位置信息的弹框
									uni.authorize({
										scope: "scope.userLocation",
										success: (data) => {
											// 授权弹框点击确认
											console.log(data)
											// 如果用户同意授权，则打开授权设置页面，判断用户的操作
											uni.openSetting({
												success: (data) => {
													// 如果用户授权了地理信息在，则提示授权成功
													if (data.authSetting['scope.userLocation'] === true) {
														uni.showToast({
															title: "授权成功",
															icon: "none",
															duration: 1000
														})
													}
												}
											})
										},
										fail: (data) => {
											// 如果用户拒绝授权，则提示用户需要授权
											uni.showToast({
												title: "您已拒绝授权，请重新授权",
												icon: "none",
												duration: 1000
											})
											that.isDeny = true
										}
									})
								}
							}
						})
					} else {
						uni.chooseLocation({
							success: (res) => {
								console.log(res)
								that.formData.name = res.name
								that.formData.address = res.address
								that.longitude = res.longitude
								that.latitude = res.latitude
								that.getClear()
							},
							fail: (e) => {
								console.log(e)
							}
						})
					}
				},
				fail: () => {
					that.isDeny = true
				},
			})
		},
		getweigui(){
            this.navrouter("/pages/TPage/Gongshi?type=1");
        },
		async getgshi(){
            let res = await this.$u.api.getWgByGongren({
				type:1
            });
            let params = res.list
            let shuzu = []
            for(let i in params){
                shuzu.push(params[i].name+'飞单'+'-'+'每次'+params[i].credit+'分')

            }
            this.noticlist = shuzu
        },
		getzhneg(e){
			return e.toFixed(0)
		}

	}
}
</script>

<style lang="scss" scoped>
page,
html {
	background-color: rgba(246, 247, 249, 1);
}

/deep/ .u-sticky {
	z-index: 1007500000 !important;
}

.gllogo {
	width: 237rpx;
	height: 67rpx;
}
.bghome{
	width: 100%;
	position: absolute;
	top: 0;
	height: 550rpx;
	
}

.hleft {
	position: absolute;
	left: 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.icon_dw{
		width: 32rpx;
		height: 32rpx;
	}
	.icon_sx{
		margin-left: 14rpx;
		width: 24rpx;
		height: 24rpx;
	}
	.adname{
		font-weight: 500;
		font-size: 28rpx;
		color: #111111;
		display: block;
		max-width: 400rpx;
		margin-left: 8rpx;
	}
}

.ptong {
	padding-left: 20rpx;
	padding-right: 20rpx;
}

.newcontent {
	padding: 0rpx 0 88rpx;

	display: flex;
	flex-direction: column;
	position: relative;
	// #ifdef MP-WEIXIN
	padding-bottom: 10rpx;
	// #endif
	.hone{
		display: flex;
		flex-direction: column;
		padding: 20rpx 35rpx 10rpx;
		.hbiao{
			display: flex;
			flex-direction: row;
			align-items: center;
			.bleft{
				display: flex;
				flex-direction: column;
				width: 60%;
				.bt{
					font-weight: bold;
					font-size: 56rpx;
					color: #111111;
				}
				.btmiao{
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					display: block;
					margin: 15rpx 0 20rpx;
				}
				.bqian{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 100%;
					justify-content: space-between;
					.qians{
						display: flex;
						flex-direction: row;
						align-items: center;
						
						.qiansicon{
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
						.qname{
							font-weight: 500;
							font-size: 24rpx;
							color: #FF823F;
						}
					}
				}
			}
			.img_zs{
				margin-left: auto;
				width: 179rpx;
				height: 158rpx;
			}
		}
	    .hling{
			display: flex;
			flex-direction: row;
			margin-top: 30rpx;
			.linitemone{
				width: 335rpx;
				height: 160rpx;
				position: relative;
				.img_bjone{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.items{
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 30rpx;
					.lname{
						font-weight: 800;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.jiename{
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						display: block;
						margin-top: 10rpx;
					}
				}
			}
			.linitemtwo{
				width: auto;
				flex: 1;
				// margin: 0 8rpx;
				margin-left: 18rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				
				.items{
					padding: 20rpx;
					width: 100%;
					height: 100%;
					position: relative;
					.lname{
						font-weight: 800;
						font-size: 26rpx;
						color: #333333;
					}
					.jiename{
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
						margin-top: 7rpx;
					}
					.img_gw{
						position: absolute;
						width: 75rpx;
						height: 75rpx;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
	}
	.notic {
		margin: 20rpx 20rpx;
		padding: 4rpx 30rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.icon_gg {
			width: 30rpx;
			height: 30rpx;
			display: inline-block;
		}

		.noticright {
			width: 85%;
		}
		.gongshi{
			width: 130rpx;
			height: 40rpx;
			background: #FFEFE9;
			border-radius: 20rpx;
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 20rpx;
			color: #EA5918;
		}
	}
	.list{
		background: linear-gradient(180deg, #FFFFFF, #F6F7F9);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 20rpx 30rpx 30rpx;
		min-height: 60vh;
		.souitem{
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			.souleft{
				display: flex;
				width: 50%;
				.shua{
					position: relative;
					margin-right: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: 10rpx;
					.huaname{
						font-weight: 500;
						font-size: 32rpx;
						color: #999999;
					}
					.huabot{
						width: 60%;
						left: 20%;
						position: absolute;
						width: 48rpx;
						height: 6rpx;
						background: linear-gradient(90deg, #FF8F39, #FF4D43);
						bottom: 0;
						display: none;
						
					}
				}
				.sactive{
					.huaname{
						font-weight: bold;
						font-size: 36rpx;
						color: #111111;
					}
					.huabot{
						display: inline-block;
					}
				}
			}
			.shainame{
				// margin-left: auto;
				display: flex;
				flex-direction: row;
				padding: 0rpx 20rpx;
				flex: 1;
				background: #EEEEEE;
				border-radius: 29rpx;
				align-items: center;
				margin-left: 30rpx;
				.icon_xz{
					margin-left: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
				.icoN_ss{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}
		}
		.litem{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 40rpx 0rpx #EEEEEE;
			border-radius: 30rpx;
			margin-bottom: 24rpx;
			.ione{
				height: 60rpx;
				background: #FFEFE9;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				display: flex;
				flex-direction: row;
				padding: 0 30rpx;
				align-items: center;
				.riqi{
					font-weight: bold;
					font-size: 26rpx;
					color: #111111;
				}
				.qitime{
					font-weight: bold;
					font-size: 26rpx;
					color: #EA5918;
					display: inline-block;
					// margin-left: 10rpx;
				}
				.diadress{
					display: inline-block;
					max-width: 250rpx;
				}
			}
			.itwo{
				padding: 30rpx;
				display: flex;
				flex-direction: column;

			}
			.name{
				
				margin-bottom: 15rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.ntit{
					font-weight: 500;
					font-size: 40rpx;
					color: #111111;
					display: inline-block;
					max-width: 70%;

				}
				.yugu{
					color: #EA5918;
					margin-left: auto;
					font-size: 24rpx;
					font-weight: 500;
				}
				.yuprice{
					color: #EA5918;
					margin-left: auto;
					font-size: 40rpx;
					font-weight: 500;
					position: relative;
					margin-left: 5rpx;
					top: 3rpx;
				}
			}
			.sc{
				display: flex;
				padding: 4rpx 20rpx;
				flex-direction: row;
				align-items: center;
				border-radius: 6rpx;
				font-weight: 500;
				font-size: 24rpx;
				margin-right: 15rpx;
				background-color: rgba(245, 245, 245, 1);
				color: #999999;
				.icon_bz{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
			.bqitem{
				display: flex;
				flex-direction: row;
			}
			.lv{
				background-color: rgba(233, 255, 235, 1);
				color: #16B925;
			}
			.chengse{
				background-color: rgba(255, 238, 231, 1);
				color: #F07F4C;
			}
			.bm{
				display: flex;
				flex-direction: row;
				margin-top: 40rpx;
				.bmleft{
					font-weight: 800;
					font-size: 44rpx;
					color: #EA5918;
				}
				
				.danwei{
					font-weight: bold;
					font-size: 24rpx;
					color: #EA5918;
					position: relative;
					margin-left: 3rpx;
					top: -2rpx;
				}
				.lvtxt{
					color: #16B925;
				}
			}
			.bmright{
				margin-left: auto;
				width:185rpx;
				height: 65rpx;
				position: relative;
				.img_an{
					position: absolute;
					width: 100%;
					height: 100%;

				}
				.bmitem{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					padding-left: 22rpx;
				}
				.zhaoman{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #999;
					background-color: #f5f5f5;
					border-radius: 50rpx;
				}
			}
		}
	}

	.fenlei {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.fenitem {
			flex: 1;
			max-width: 25%;
			margin: 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.navimg {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.fenitem:first-child {
			margin-left: 0;
		}

		.fenitem:last-child {
			margin-right: 0;
		}
	}

	.tuilist {
		display: flex;
		margin: 0rpx 0 0rpx;
		background-color: #fff;
		padding: 40rpx 0 20rpx;
		.tuiview {
			width: 100%;
			white-space: nowrap;

			.tuiitem {
				display: inline-block;
				// margin-right: 50rpx;
				position: relative;
				padding-bottom: 14rpx;
				width: 100rpx;
				text-align: center;

				.tuiname {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.xuans {
					width: 50%;
					position: absolute;
					left: 25%;
					bottom: 0;
					height: 14rpx;
					display: none;
				}
			}

			.tactive {
				.tuiname {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: $Themecolor;
				}

				.xuans {
					display: inline-block;
				}
			}

		}
	}

	.souview {
		margin: 0 0 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		// height: 90rpx;
		padding: 0rpx 20rpx 20rpx;

		.souleft {
			width: 80%;
			border: 1rpx solid #CCCCCC;
			border-radius: 10rpx;
			height: 60rpx;
			padding: 0rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon_sousuo {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}

		.shaixuan {
			margin-left: auto;
			width: 100rpx;
			height: 60rpx;
			background: #EEEEEE;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.icon_ss {
				width: 12rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}

			text {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
		}
	}

	.hlist {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.hitem {
			width: 48%;
			min-height: 400rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(107, 107, 107, 0.07);

			.hone {
				width: 100%;
				height: 330rpx;
				border-radius: 20rpx 20rpx 0 0;

				.listimg {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

			}

			.htwo {
				padding: 15rpx 15rpx 25rpx;

				.hname {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列

				}

				.hmiao {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					display: block;
					margin-top: 8rpx;
				}
			}
		}

		.hitem:nth-child(even) {
			margin-left: auto;
		}
	}
}


.txt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.immerse {
	width: 100%;
	height: calc(var(--status-bar-height) + env(safe-area-inset-top));
	background-color: #fff;
	// #ifdef APP-PLUS
	height: calc(var(--status-bar-height);
			// #endif
			z-index: 1007500000;
			position: relative;
	}</style>
